<template>
  <view class="u-m-30">
    <u-divider text="正在秒杀中" v-if="list1.length"></u-divider>
    <view v-for="(item, index) in list1" :key="index">
      <image
        :src="item.avatar"
        mode="widthFix"
        style="width: 100%; height: auto;"
        @click="toSickillInfo(item)"
      />
    </view>
    <u-divider text="即将开始秒杀" v-if="list2.length"></u-divider>
    <view v-for="(item, index) in list2" :key="index">
      <image
        :src="item.avatar"
        mode="widthFix"
        style="width: 100%; height: auto;"
        @click="toSickillInfo(item)"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { activity } from '@/utils/api'

const listData = ref([])

const list1 = computed(() => {
  return listData.value.filter(v => +new Date(v.beginTime) < +new Date())
})
const list2 = computed(() => {
  return listData.value.filter(v => +new Date(v.beginTime) > +new Date())
})
async function init() {
  const params = {
    "pageIndex": 1,
    "pageSize": 10
  }
  const res = await activity.seckills(params)
  listData.value = res.data.items;
}

function toSickillInfo(row) {
  const params = [
    `avatar=${row.avatar}`,
    `description=${row.description}`,
    `beginTime=${row.beginTime}`,
    `endTime=${row.endTime}`,
    `name=${row.name}`,
    `id=${row.id}`,
  ]
  uni.navigateTo({ url: '/pages/seckill-info/seckill-info?' + params.join('&') })
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>

</style>